import React, {Component} from 'react';
import {View, Text, StyleSheet, Alert} from 'react-native';
import {ScrollView} from 'react-native-gesture-handler';
import {connect} from 'react-redux';
import {Image, ImageBackground} from 'react-native';
import {Flex, Modal} from '@ant-design/react-native';
import {logoutAccount} from '~/utils/common';

const mapGetter = (state) => {
    return {
        userinfo: state.userinfo,
        system: state.system,
    };
};

class my extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tu: '',
            visible: false,
            files: [],
            name: '昵称',
            address: '账号',
            tips: '点击登录',
            url: global.AppData.base_url,
        };
        this.ContentTabs = this.ContentTabs.bind(this);
    }

    ContentTabs() {
        const head1 = (
            <View style={styles.usertips}>
                <Text style={styles.usertext} onPress={() => this.props.navigation.push('Login')}>
                    {this.state.tips}
                </Text>
            </View>
        );
        const head2 = (
            <View style={styles.usertipss}>
                <Flex onPress={() => this.props.navigation.push('MyModify')}>
                    {this.props.userinfo.logo === '' ? (
                        <Image style={{width: 70, height: 70, borderRadius: 40}} source={require('~/assets/my/nantou.png')} />
                    ) : (
                        <Image style={{width: 70, height: 70, borderRadius: 40}} source={{uri: this.state.url + this.props.userinfo.logo}} />
                    )}
                </Flex>
                <View style={styles.usertipsse}>
                    <Text style={styles.usertext}>{this.props.userinfo.nickname}</Text>
                    <Text style={styles.usertexts}>{this.props.userinfo.mobile}</Text>
                    {/* <Text style={styles.usertexts} onPress={() => this.props.navigation.push('WxPay')}>支付</Text> */}
                </View>
            </View>
        );
        const head = this.props.userinfo.token === '' ? head1 : head2;
        let arr = [
            {
                name: '我的钱包',
                title: 'Mywallet',
                icon: require('~/assets/my/zulin2x.png'),
            },
            {
                name: '支付记录',
                title: 'PaymentRecord',
                icon: require('~/assets/my/fukuan.png'),
            },
            {
                name: '租售车位',
                title: 'LeaseSale',
                icon: require('~/assets/my/zulin2x.png'),
            },
            {
                name: '我的足迹',
                title: 'Myfootprint',
                icon: require('~/assets/my/foot.png'),
            },
            {
                name: '我的咨询',
                title: 'MyConsultingService',
                icon: require('~/assets/my/advisory.png'),
            },
            // {
            //     name: '分享赚钱',
            //     title: 'ShareMoney',
            //     icon: require('~/assets/my/fenxiang2x.png'),
            // },
            {
                name: '我的信息',
                title: 'MyInformation',
                icon: require('~/assets/my/myinfo.png'),
            },
            {
                name: '关于我们',
                title: 'MyInfo',
                icon: require('~/assets/my/guanyuwomen2x.png'),
            },
            // {
            //     name: '问卷调查',
            //     title: 'Investigation',
            //     icon: require('~/assets/my/survey.png'),
            // },
            // {name: '我的业主', title: 'MyOwner'},
            // {name: '意向客户', title: 'Intention'},
            // {name: '销售订单', title: 'SaleOrder'},
            // {name: '营销活动', title: 'Activity'},
        ];
        const content = arr.map((item) => {
            return (
                <View style={styles.textviews}>
                    <View style={styles.textfenge} />
                    <Flex
                        style={styles.textview}
                        onPress={() => {
                            this.props.userinfo.token === '' ? this.props.navigation.push('Login') : this.props.navigation.push(item.title);
                        }}>
                        <Image style={{width: 22, height: 22}} source={item.icon} />
                        <Text style={styles.texts}>{item.name}</Text>
                        <Flex style={{width: '65%'}} justify={'end'}>
                            <Image style={{width: 10, height: 16}} source={require('~/assets/my/gengduo2x.png')} />
                        </Flex>
                    </Flex>
                </View>
            );
        });
        return (
            <View>
                <View>
                    <ImageBackground style={{width: '100%', height: 325}} source={require('~/assets/my/beijing2x.png')}>
                        {head}
                        <View
                            style={{
                                marginLeft: 18,
                                marginRight: 18,
                                height: 135,
                                borderRadius: 15,
                                flexDirection: 'column',
                                backgroundColor: '#FFFFFF',
                                paddingTop: 18,
                                paddingLeft: 19,
                            }}>
                            <View
                                style={{
                                    flexDirection: 'row',
                                }}>
                                <Image style={{width: 24, height: 24}} source={require('~/assets/my/che2x.png')} />
                                <Text style={{paddingLeft: 7, fontSize: 14}}>车位订单</Text>
                                <View
                                    style={{
                                        width: '70%',
                                        paddingRight: 15,
                                        flexDirection: 'row',
                                        justifyContent: 'flex-end',
                                    }}>
                                    <Text
                                        style={{
                                            color: '#999999',
                                            fontSize: 12,
                                        }}
                                        onPress={() => {
                                            this.props.userinfo.token === ''
                                                ? this.props.navigation.push('Login')
                                                : this.props.navigation.push('MyOrder');
                                        }}>
                                        全部
                                    </Text>
                                    <View
                                        style={{
                                            width: 5.5,
                                            height: 18,
                                            flexDirection: 'column',
                                            alignItems: 'center',
                                            justifyContent: 'center',
                                        }}>
                                        <Image
                                            style={{
                                                width: 5.5,
                                                height: 10,
                                                marginLeft: 5,
                                            }}
                                            source={require('~/assets/my/gengduoxiao2x.png')}
                                        />
                                    </View>
                                </View>
                            </View>
                            <Flex direction={'row'} justify={'between'} style={{paddingTop: 26, paddingRight: 23}}>
                                <Flex
                                    direction={'column'}
                                    onPress={() => {
                                        this.props.userinfo.token === ''
                                            ? this.props.navigation.push('Login')
                                            : this.props.navigation.push('MyOrder', {
                                                  params: 0,
                                              });
                                    }}>
                                    <Image style={{width: 24, height: 24}} source={require('~/assets/my/iconyuyuerengou2x.png')} />
                                    <Text style={{paddingTop: 10, fontSize: 12}}>全部订单</Text>
                                </Flex>
                                <Flex
                                    direction={'column'}
                                    onPress={() => {
                                        this.props.userinfo.token === ''
                                            ? this.props.navigation.push('Login')
                                            : this.props.navigation.push('MyOrder', {
                                                  params: 1,
                                              });
                                    }}>
                                    <Image style={{width: 24, height: 24}} source={require('~/assets/my/tobepaid2x.png')} />
                                    <Text style={{paddingTop: 10, fontSize: 12}}>待支付</Text>
                                </Flex>
                                <Flex
                                    direction={'column'}
                                    onPress={() => {
                                        this.props.userinfo.token === ''
                                            ? this.props.navigation.push('Login')
                                            : this.props.navigation.push('MyOrder', {
                                                  params: 2,
                                              });
                                    }}>
                                    <Image style={{width: 24, height: 24}} source={require('~/assets/my/qianhetong2x.png')} />
                                    <Text style={{paddingTop: 10, fontSize: 12}}>待审核</Text>
                                </Flex>
                                <Flex
                                    direction={'column'}
                                    onPress={() => {
                                        this.props.userinfo.token === ''
                                            ? this.props.navigation.push('Login')
                                            : this.props.navigation.push('MyOrder', {
                                                  params: 3,
                                              });
                                    }}>
                                    <Image style={{width: 24, height: 24}} source={require('~/assets/my/tuikuan2x.png')} />
                                    <Text style={{paddingTop: 10, fontSize: 12}}>已认购</Text>
                                </Flex>
                                <Flex
                                    direction={'column'}
                                    onPress={() => {
                                        this.props.userinfo.token === ''
                                            ? this.props.navigation.push('Login')
                                            : this.props.navigation.push('MyOrder', {
                                                  params: 4,
                                              });
                                    }}>
                                    <Image style={{width: 24, height: 24}} source={require('~/assets/my/zuofei2x.png')} />
                                    <Text style={{paddingTop: 10, fontSize: 12}}>已完成</Text>
                                </Flex>
                            </Flex>
                        </View>
                    </ImageBackground>

                    <View style={{backgroundColor: '#F6F6F6'}}>
                        <Text
                            style={{
                                fontSize: 15,
                                paddingLeft: 15.5,
                            }}>
                            我的服务
                        </Text>
                        <Flex direction={'row'} justify={'around'} style={{marginTop: 18}}>
                            <Flex
                                style={{
                                    width: 79,
                                    height: 79,
                                    backgroundColor: '#FFFFFF',
                                    borderRadius: 10,
                                }}
                                direction={'column'}
                                justify={'center'}
                                onPress={() => {
                                    this.props.userinfo.token === '' ? this.props.navigation.push('Login') : this.props.navigation.push('MyParking');
                                }}>
                                <Image style={{width: 22, height: 22}} source={require('~/assets/my/zongchewei2x.png')} />
                                <Text style={{paddingTop: 10, fontSize: 12}}>我的车位</Text>
                            </Flex>
                            <Flex
                                style={{
                                    width: 79,
                                    height: 79,
                                    backgroundColor: '#FFFFFF',
                                    borderRadius: 10,
                                }}
                                direction={'column'}
                                justify={'center'}
                                onPress={() => {
                                    this.props.userinfo.token === '' ? this.props.navigation.push('Login') : this.props.navigation.push('MyGift');
                                }}>
                                <Image style={{width: 22, height: 22}} source={require('~/assets/my/wodezengpin2x.png')} />
                                <Text style={{paddingTop: 10, fontSize: 12}}>我的赠品</Text>
                            </Flex>
                            <Flex
                                style={{
                                    width: 79,
                                    height: 79,
                                    backgroundColor: '#FFFFFF',
                                    borderRadius: 10,
                                }}
                                direction={'column'}
                                justify={'center'}
                                onPress={() => {
                                    this.props.userinfo.token === '' ? this.props.navigation.push('Login') : this.props.navigation.push('MyLoan');
                                }}>
                                <Image style={{width: 22, height: 22}} source={require('~/assets/my/icon-test2x.png')} />
                                <Text style={{paddingTop: 10, fontSize: 12}}>我的贷款</Text>
                            </Flex>
                            <Flex
                                style={{
                                    width: 79,
                                    height: 79,
                                    backgroundColor: '#FFFFFF',
                                    borderRadius: 10,
                                }}
                                direction={'column'}
                                justify={'center'}
                                onPress={() => {
                                    this.props.userinfo.token === ''
                                        ? this.props.navigation.push('Login')
                                        : this.props.navigation.push('MyCollection');
                                }}>
                                <Image style={{width: 22, height: 22}} source={require('~/assets/my/shoucang2x.png')} />
                                <Text style={{paddingTop: 10, fontSize: 12}}>我的收藏</Text>
                            </Flex>
                        </Flex>
                    </View>

                    <View style={styles.dividingview} />
                </View>
                <View style={{backgroundColor: '#F6F6F6', alignItems: 'center'}}>
                    {content}
                    {this.props.userinfo.token !== '' && (
                        <View style={styles.textviews}>
                            <View style={styles.textfenge} />
                            <Flex
                                style={styles.textview}
                                onPress={() => {
                                    this.logout();
                                }}>
                                <Image style={{width: 22, height: 22}} source={require('~/assets/my/exit.png')} />
                                <Text style={styles.texts}>退出账号</Text>
                            </Flex>
                        </View>
                    )}
                </View>
            </View>
        );
    }

    logout = () => {
        Modal.alert('提示', '确认退出账号？', [
            {
                text: '取消',
            },
            {
                text: '确定',
                onPress: () => {
                    logoutAccount().then((state) => {
                        if (state) {
                            this.view.scrollTo({y: 0, animated: false});
                            this.setState({
                                tips: '点击登录',
                            });
                        } else {
                            Alert.alert('退出账号失败');
                        }
                    });
                },
            },
        ]);
    };

    render() {
        return (
            <ScrollView style={styles.scrollview} ref={(ref) => (this.view = ref)}>
                <View style={styles.view}>{this.ContentTabs()}</View>
            </ScrollView>
        );
    }
}

export default connect(mapGetter)(my);

const styles = StyleSheet.create({
    scrollview: {
        flex: 1,
    },
    titText: {
        fontSize: 20,
        textAlignVertical: 'center',
    },
    tituserview: {
        width: '100%',
        marginTop: 15,
        flexDirection: 'row',
        justifyContent: 'center',
    },
    view: {
        width: '100%',
        height: '100%',
    },
    usertips: {
        width: '100%',
        height: 150,
        justifyContent: 'center',
        marginLeft: 19,
    },
    usertext: {
        fontSize: 20,
        color: '#FFFFFF',
        marginLeft: 8,
    },
    usertexts: {
        fontSize: 15,
        color: '#FFFFFF',
        marginLeft: 8,
    },
    texts: {
        fontSize: 15,
        marginLeft: 9.5,
    },
    usertipss: {
        width: '100%',
        height: 150,
        flexDirection: 'row',
        alignItems: 'center',
        marginLeft: 19,
    },
    usertipsse: {
        flexDirection: 'column',
    },
    textview: {
        height: 50,
        alignItems: 'center',
        paddingLeft: 17,
        flexDirection: 'row',
    },
    textviews: {
        width: '90%',
        flexDirection: 'column',
        backgroundColor: '#FFFFFF',
        borderRadius: 15,
    },
    dividingview: {
        width: '100%',
        backgroundColor: '#F6F6F6',
        height: 21.5,
    },
    textfenge: {
        width: '100%',
        backgroundColor: '#F6F6F6',
        height: 1,
    },
});
